"use strict";

var __importDefault = this && this.__importDefault || function (mod) {
  return mod && mod.__esModule ? mod : {
    "default": mod
  };
};

Object.defineProperty(exports, "__esModule", {
  value: true
});

const cssr_1 = require("../../../_utils/cssr");

const fade_in_cssr_1 = __importDefault(require("../../../_styles/transitions/fade-in.cssr"));

const fade_in_scale_up_cssr_1 = __importDefault(require("../../../_styles/transitions/fade-in-scale-up.cssr")); // vars:
// --icon-color
// --bezier


exports.default = (0, cssr_1.c)([(0, cssr_1.c)('body >', [(0, cssr_1.cB)('image-container', 'position: fixed;')]), (0, cssr_1.cB)('image-preview-container', `
 position: fixed;
 left: 0;
 right: 0;
 top: 0;
 bottom: 0;
 display: flex;
 `), (0, cssr_1.cB)('image-preview-overlay', `
 z-index: -1;
 position: absolute;
 left: 0;
 right: 0;
 top: 0;
 bottom: 0;
 background: rgba(0, 0, 0, .3);
 `, [(0, fade_in_cssr_1.default)()]), (0, cssr_1.cB)('image-preview-toolbar', `
 z-index: 1;
 position: absolute;
 left: 50%;
 transform: translateX(-50%);
 border-radius: 24px;
 height: 48px;
 bottom: 40px;
 padding: 0 12px;
 background: rgba(0, 0, 0, .35);
 color: var(--icon-color);
 transition: color .3s var(--bezier);
 display: flex;
 align-items: center;
 `, [(0, cssr_1.cB)('base-icon', `
 padding: 0 8px;
 font-size: 28px;
 cursor: pointer;
 `), (0, fade_in_cssr_1.default)()]), (0, cssr_1.cB)('image-preview-wrapper', `
 position: absolute;
 left: 0;
 right: 0;
 top: 0;
 bottom: 0;
 display: flex;
 pointer-events: none;
 `, [(0, fade_in_scale_up_cssr_1.default)()]), (0, cssr_1.cB)('image-preview', `
 user-select: none;
 pointer-events: all;
 margin: auto;
 max-height: 100vh;
 max-width: 100vw;
 transition: transform .3s var(--bezier);
 `), (0, cssr_1.cB)('image', `
 display: inline-flex;
 max-height: 100%;
 max-width: 100%;
 `, [(0, cssr_1.cNotM)('preview-disabled', `
 cursor: pointer;
 `), (0, cssr_1.c)('img', `
 border-radius: inherit;
 `)])]);